<!--
 * @Description: 借阅单详情页 预览
 * @Author: zhao
 * @Date: 2022-06-28 11:34:44
 * @LastEditors: zhao
 * @LastEditTime: 2022-07-07 16:29:08
-->
<!--  -->
<template>
    <div style="padding: var(--main-padding)">
        <div class="BorrowFormDetails">
            <div style="padding-top: 10px">
                <zBack :name="'借阅单详情'" />
            </div>
            <div style="text-align: right">
                <el-button type="primary" @click="open()">下载execl</el-button>
            </div>
            <div class="BorrowFormDetails_steps">
                <zsteps :active="form.state * 1" :description="form.reviewComments" />
            </div>
            <div class="BorrowFormDetails_content">
                <p v-if="form.state != '已撤销'">
                    <span>审核意见:</span>
                    {{ form.reviewComments }}
                </p>
                <el-collapse v-model="activeNames" @change="handleChange" class="uptClass" id="borrowPrint">
                    <el-collapse-item :name="index" v-for="(i, index) in BorrowFormDetailsData" :key="index + 'BFDetails'">
                        <template slot="title">
                            <div class="ellipsis">
                                {{ i.title }}
                            </div>
                        </template>
                        <el-descriptions title="" border :column="3">
                            <el-descriptions-item label="档案号" :span="1">{{ i.snNo }}</el-descriptions-item>
                            <el-descriptions-item label="资料名称" :span="1">{{ i.title }}</el-descriptions-item>
                        </el-descriptions>

                        <div class="DirectoryInfo">目录信息</div>

                        <div class="collapse_table">
                            <ztable :tableHeader="tableHeader" :tableData="i.data" :tableType="tableType" />
                        </div>
                        <!-- <table>
                            <tr>
                                <th v-for="(th, thindex) in tableHeader" :key="thindex">{{ th.label }}</th>
                            </tr>
                            <tr>
                                <td v-for="(tr, index) in i.data" :key="index">{{ tr }}</td>

                            </tr>

                        </table> -->
                    </el-collapse-item>
                </el-collapse>
            </div>

            <div style="padding-top: 10px; text-align: center">
                <div v-if="form.state == '1'">
                    <!-- <el-button type="primary" size="default" @click="onSubmit('返回')">返回</el-button> -->
                </div>
                <div v-if="rowdata.state == '已驳回' || rowdata.state == '已撤销'">
                    <el-popconfirm
                        ref="popover"
                        title="确定删除吗？"
                        confirm-button-text="删除"
                        cancel-button-text="取消"
                        icon="el-icon-info"
                        icon-color="red"
                        @confirm="deleteFile"
                    >
                        <el-button type="danger" slot="reference" size="default" @click="onSubmit('删除')">删除</el-button>
                    </el-popconfirm>

                    <el-button type="primary" size="default" @click="onSubmit('再次提交')">再次提交</el-button>
                    <!-- <el-button type="" size="default" @click="onSubmit('返回')">返回</el-button> -->

                    <zdialog :dataInfo="dataInfo" :ztype="'again'" ref="zdialog" />
                </div>
                <div v-if="form.state == '3'">
                    <!-- <el-button type="primary" size="default" @click="onSubmit('返回')">返回</el-button> -->
                </div>
                <div v-if="form.state == '4'">
                    <!-- <el-button type="primary" size="default" @click="onSubmit('返回')">返回</el-button> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import zsteps from "./Steps.vue"
import ztable from "@/components/zTable/table.vue"
import zBack from "@/components/zBack"
import Print from "vue-print-nb"
import zdialog from "./dialog.vue"
export default {
    name: "",
    data() {
        return {
            form: {
                active: 1,
                description: "",
            },
            activeNames: [0],

            tableHeader: [
                { prop: "DataType", label: "资料类型", width: "120" },
                { prop: "FileNO", label: "件号", width: "120" },
                { prop: "FileName", label: "文件名", width: "" },
                { prop: "Remark", label: "附注", width: "" },
            ],
            BorrowFormDetailsData: [],
            tableType: {
                isIndex: false,
                isSelection: true,
                border: true,
            },
            printObj: {
                id: "",
            },
            dataInfo: {},
            rowdata: {},
        }
    },
    directives: {
        Print,
    },
    components: { zsteps, ztable, zBack, zdialog },

    computed: {},

    mounted() {
        this.initData()
        this.$store.state.table.PaginationData.layout = "total, sizes, prev, pager, next, jumper"
    },

    methods: {
        onSubmit(name) {
            if (name == "删除") {
                const sdata = this.$store.state.table.selectData
                if (sdata.length == 0) {
                    this.$message.error("请选择数据")
                    this.$refs.popover.visible = true
                    return
                } else {
                    this.$refs.popover.visible = false
                }
            }
            if (name == "再次提交") this.submitAgain()
        },
        handleChange() {},
        //全部展开
        async open() {
            // this.activeNames = []
            // this.BorrowFormDetailsData.map((e, index) => this.activeNames.push(index))
            // setTimeout(() => {
            //     this.printObj.id = "#borrowPrint"
            // }, 500);
            const res = await this.$store.dispatch("borrowForm/DownloadFormDetailExcel", {
                tableNo: this.$store.getters["table/GET_ROWDATA"].tableNo,
            })

            if (res.type === "text/plain") {
                // 说明是普通对象数据，读取信息
                const fileReader = new FileReader()
                fileReader.onloadend = () => {
                    try {
                        const jsonData = JSON.parse(fileReader.result) // 说明是普通对象数据，后台转换失败
                        // 后台信息
                        this.$message.error(jsonData.msg)
                    } catch (err) {
                        // 解析成对象失败，说明是正常的文件流
                        // 下载文件
                    }
                }

                fileReader.readAsText(res)
            } else {
                this.$store.commit("table/getFileFlow", res)
            }
        },
        print() {},
        async initData() {
            const rowdata = this.$store.getters["table/GET_ROWDATA"]
            if (!rowdata) {
                this.$message.error("获取数据失败，请返回重试")
                this.$router.push("/AttributeQuery")
                return
            }
            this.rowdata = rowdata
            this.dataInfo = {
                IntroductionLetter: { name: rowdata.introductionLetterName },
                Assignment: { name: rowdata.assignmentName },
                CertificateNo: rowdata.certificateNo,
                DataUseArea: rowdata.dataUseArea,
                DataPurpose: rowdata.dataPurpose,
                id: rowdata.id,
            }
            this.form = { ...rowdata }
            if (rowdata.state == "审核中") this.form.state = "1"
            if (rowdata.state == "已驳回") this.form.state = "2"
            if (rowdata.state == "已通过") this.form.state = "2"
            if (rowdata.state == "已完成") this.form.state = "3"
            if (rowdata.state == "已过期") this.form.state = "3"
            // if (rowdata.state == "已撤销") this.form.state = "1"

            const { data } = await this.$store.dispatch("borrowForm/getBorrowingFormDetails", { tableNo: rowdata.tableNo })

            let preindex = 0
            this.BorrowFormDetailsData = data.reduce((pre, item, index) => {
                let data = {
                    snNo: item.snNo,
                    title: item.title,
                    indeterminate: false,
                    selected: false,

                    data: [],
                }

                let fileData = { ...JSON.parse(item.fileInfo), id: item.id, selected: false }

                if (pre.length == 0) {
                    pre.push(data)
                    pre[preindex].data.push(fileData)
                    return pre
                }
                if (pre.some((e) => e.title == item.title)) {
                    pre[preindex].data.push(fileData)
                } else {
                    pre.push(data)
                    preindex++
                    pre[preindex].data.push(fileData)
                }
                return pre
            }, [])
        },
        async updateBorrowingFormDetails() {
            const sdata = this.$store.state.table.selectData

            let cdata = []
            sdata.map((e) => {
                cdata.push(e.id)
            })
            let ddata = {
                tableNo: this.rowdata.tableNo,
                id: cdata,
            }
            const { data, code, msg } = await this.$store.dispatch("borrowForm/updateBorrowingFormDetails", ddata)
            if (code == 200) this.$message.success(msg || "删除成功")
            this.initData()
        },
        //再次提交
        submitAgain() {
            this.$refs.zdialog.dialogVisible = true
        },
        deleteFile() {
            this.updateBorrowingFormDetails()
        },
    },
}
</script>
<style lang='scss' scoped>
.BorrowFormDetails {
    // padding: var(--main-padding);
    background: white;
    min-height: $height_full;
    padding: 20px;
    margin-bottom: 150px;

    .BorrowFormDetails_steps {
        width: 80%;
        margin: 0 auto;
        padding: 50px 0;
    }

    .el-collapse-item {
        // padding: 0 20px;
        border: 1px solid #eee;

        ::v-deep .el-collapse-item__header {
            background: rgb(213, 219, 211);
            justify-content: center;
            // font-size: 20px;
            // /*第一步： 溢出隐藏 */
            // overflow: hidden;
            // /* 第二步：让文本不会换行， 在同一行继续 */
            // white-space: nowrap;
            // /* 第三步：用省略号来代表未显示完的文本 */
            // text-overflow: ellipsis;
        }

        ::v-deep .el-collapse-item__wrap {
            height: 100%;
        }
    }

    .DirectoryInfo {
        font-size: 24px;
        font-weight: 550;
        text-align: center;
        padding: 5px 0;
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
    }

    ::v-deep .el-collapse-item__header {
        padding: 0 20px;
    }

    .el-button {
        margin: 0 10px;
    }

    .collapse_table {
        // height: 400px;
        // overflow-y: scroll;

        // &::-webkit-scrollbar {
        //     display: none;
        // }
        
    }
}
</style>